<template>
    <el-container>
    <el-aside width="auto" class="aside-view" style="width: 160px;">
        <div class="corp-info">
            <div class="corp-abbreviation" style="line-height: 50px;color: aliceblue;text-align: center;">花花科技</div>
            <div class="fee-type"></div>
        </div>
        <left-menu :navList="navList"></left-menu>
    </el-aside>
    <el-container>
        <el-header>
            <h1>header</h1>
            <!-- <top-header></top-header> -->
        </el-header>
        <el-main>
            <h1>Main</h1>
        </el-main>
    </el-container>
  </el-container>
</template>

<script>
import LeftMenu from '@/components/comm/LeftMenu';
// import TopHeader from '../components/comm/TopHeader.vue';

export default {
    components:{
        LeftMenu
    },
    data(){
        return {
            navList:[],
        }
    },
    methods:{
        menuList(){
            this.$axios.get("./static/menuList.json").then(resp => {
                this.navList = resp.data;
            })
        }
    },
    created(){
        this.menuList();
    }
}
</script>

<style>
.aside-view.fixed,.aside-view:hover {
    transition: width .3s;
    width: 160px
}
.el-container{
    height: 100%;
}
.el-header{
    background-color: #EDEDED;
    color: #333;
}
.el-aside{
    background-color: #132742;
}
.el-main{
    background-color: #F7F7F7;
    color: #333;
}
.aside-view .corp-info[data-v-34dfb3eb] {
    align-items: center;
    background: #132742;
    display: flex;
    height: 52px;
    width: 160px
}

.aside-view .corp-info .corp-abbreviation[data-v-34dfb3eb] {
    background-color: #ff8c2e;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    flex: 0 0 28px;
    height: 28px;
    line-height: 28px;
    margin: 16px;
    text-align: center;
    width: 28px
}

.aside-view .corp-info .is-stand-alone[data-v-34dfb3eb] {
    background-color: #35db9d
}

.aside-view .corp-info .company-icon[data-v-34dfb3eb] {
    border-radius: 6px;
    flex: 0 0 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 16px;
    overflow: hidden;
    text-align: center;
    width: 28px
}

.aside-view .corp-info .corp-name[data-v-34dfb3eb] {
    color: #fff;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.aside-view .corp-info .fee-type[data-v-34dfb3eb] {
    display: inline-block;
    flex: 0 0 28px;
    font-size: 12px;
    height: 12px;
    margin-left: 4px;
    width: 12px
}

.aside-view .corp-info .fee-type .version[data-v-34dfb3eb] {
    color: #ffe0ba
}

.aside-view .corp-info .fee-type[data-v-34dfb3eb] {
    display: inline-block;
    flex: 0 0 28px;
    font-size: 12px;
    height: 12px;
    margin-left: 4px;
    width: 12px
}

.aside-view .corp-info .fee-type .version[data-v-34dfb3eb] {
    color: #ffe0ba
}
</style>